<template>
  <div class="line1">
    <div
      id="line1"
      style="width: 90%;height:450px;"
    ></div>
  </div>
</template>

<script>
import echarts from "echarts/lib/echarts";
import {
  getDays,
  getDate,
  GetDateStr,
  compatibility_ios,
  formatDate,
  formatDateTime,
  unique,
  isInteger,
  dateAdd
} from "@/utils/common";
// 引入柱状图
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/chart/custom";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/toolbox";
import "echarts/lib/component/markPoint";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/dataZoom";
export default {
  data() {
    return {
      //白天参数
      day_filter: [],
      //处理值
      processing_values: [],
      //用户信息
      user: "",
      //排卵时间
      ovulationDate2: [],
      //基线
      baseline_values: [],
      source: [],
      option: {},
      //爱爱
      sexPeriodData: [],
      //阴超
      ultrasoundPeriodData: []
    };
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("line1"));
    this.initData();
  },
  props: ["userInfo", "processing_value", "date", "day_datas", "ovulateList"],
  methods: {
    initData() {
      //折线图配置
      this.option = {
        title: {
          text: "佑蜜值曲线图"
        },
        grid: {
          bottom: "25%"
        },
        dataZoom: [
          {
            show: true,
            bottom: "10%"
          },
          {
            type: "inside"
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765"
            }
          },
          formatter: function(params) {
            if (params[0].value[2] !== "icon") {
              //参数补0
              if (params[0].value[8] == undefined) {
                params[0].value[8] = "0";
              } else if (params[0].value[9] == undefined) {
                params[0].value[9] = "0";
              } else if (params[0].value[7] == undefined) {
                params[0].value[7] = "0";
              } else if (params[0].value[6] == undefined) {
                params[0].value[6] = "0";
              } else if (params[0].value[5] == undefined) {
                params[0].value[5] = "0";
              }

              if (
                params[0].seriesName == "处理值" ||
                params[0].seriesName == "递进方差值"
              ) {
                let temperature = "";
                for (let i = 0; i < params.length; i++) {
                  if (params[i].seriesName == "佑蜜值") {
                    temperature = params[i].value[3];
                    break;
                  } else {
                    temperature = 0;
                  }
                }

                //19-07-25 Kevin说优孕时隐藏排除条件
                let condition;
                if (!params[0].value[10]) {
                  condition = "【排除条件】" + params[0].value[7];
                } else {
                  condition = "";
                }

                return [
                  params[0].value[11],
                  "【佑蜜值】" + params[0].value[4],
                  "【处理值】" + params[0].value[1],
                  "【递进方差值】" + params[0].value[5],
                  "【基线】" + params[0].value[6],
                  "【P1-P2】" + params[0].value[8] + "-" + params[0].value[9],
                  "【温度】" + temperature,
                  condition
                ].join("<br>");
              } else if (params[0].value[4] !== null) {
                let temperature = "";
                for (let i = 0; i < params.length; i++) {
                  if (params[i].seriesName == "佑蜜值") {
                    temperature = params[i].value[3];
                    break;
                  } else {
                    temperature = 0;
                  }
                }
                return [
                  params[0].value[5],
                  "【佑蜜值】" + params[0].value[1],
                  "【原始值】" + params[0].value[2],
                  "【温度】" + temperature
                ].join("<br>");
              } else {
                let temperature = "";
                for (let i = 0; i < params.length; i++) {
                  if (params[i].seriesName == "佑蜜值") {
                    temperature = params[i].value[3];
                    break;
                  } else {
                    temperature = 0;
                  }
                }
                return [
                  "【处理值】" + params[0].value[1],
                  "【递进方差值】" + params[0].value[5],
                  "【基线】" + params[0].value[6],
                  "【P1-P2】" + params[0].value[8] + "-" + params[0].value[9],
                  "【排除条件】" + params[0].value[8],
                  "【温度】" + temperature
                ].join("<br>");
              }
            }
          },
          textStyle: {
            align: "left"
          }
        },
        legend: {
          orient: "horizontal",
          bottom: 0,
          data: [
            "处理值",
            "递进方差值",
            "佑蜜值",
            "晚上曲线",
            "排卵时间",
            "例假期",
            "易排卵期",
            "基线"
          ],
          //是否默认显示
          selected: { 基线: true }
        },
        axisPointer: {
          link: {
            xAxisIndex: "all"
          }
        },
        calculable: true,
        xAxis: {
          type: "time",
          splitLine: {
            lineStyle: {
              color: "#ddd"
            }
          },
          axisLabel: {
            interval: "auto",
            rotate: "45"
          }
        },
        yAxis: [
          {
            type: "value",
            min: null,
            max: null,
            splitNumber: null
          }
        ],
        label: {
          normal: {
            show: true
          }
        },
        series: [
          {
            name: "处理值",
            type: "line",
            smooth: true,
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            data: []
          },
          {
            name: "递进方差值",
            type: "line",
            smooth: true,
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            data: []
          },
          {
            name: "基线",
            type: "line",
            smooth: true,
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            data: []
          },
          {
            name: "爱爱",
            type: "line",
            smooth: true,
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            data: []
          },
          {
            name: "阴超",
            type: "line",
            smooth: true,
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            data: []
          },
          {
            name: "佑蜜值",
            type: "line",
            smooth: true,
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            data: []
          },
          {
            type: "custom",
            renderItem: this.renderItem,
            name: "易排卵期",
            stack: "sum",
            tooltip: {
              show: false
            },
            barCategoryGap: "20%",
            itemStyle: {
              normal: {
                color: "rgba(54,208,241,0.5)"
              }
            },
            smooth: true,
            data: []
          },
          {
            type: "custom",
            renderItem: this.renderItem,
            name: "例假期",
            stack: "sum",
            tooltip: {
              show: false
            },
            barCategoryGap: "20%",
            itemStyle: {
              normal: {
                color: "rgba(255,95,124,0.5)"
              }
            },
            smooth: true,
            data: []
          },
          {
            type: "custom",
            renderItem: this.renderItem,
            name: "排卵时间",
            stack: "sum",
            tooltip: {
              show: false
            },
            barCategoryGap: "20%",
            itemStyle: {
              normal: {
                color: "#9400D3",
                opacity: 0.5,
                label: {
                  show: true,
                  formatter: function(param) {
                    return [param.data[0], param.data[1]];
                  },
                  position: "top"
                }
              }
            },
            smooth: true,
            data: []
          }
        ],
        //修改数据视图
        optionToContent: function(opt) {
          var axisData1 = opt.series;
          var header =
            '<div id="parents_height" style="width:100%;height:30px;position:absolute;background:#fff"><table class="table-thead" style="float:left;width:49%;"><thead><tr><th class="a1">早上时间</th><th class="a2">佑蜜值</th><th class="a3">原始值</th><th class="a4">温度</th></tr></thead></table></div>';
          var table1 =
            '<div style="width:100%;height:322px;"><div style="height:320px;float:left;width:50%;"><table class="datas" style="width:100%;margin-top:30px;"><tbody>';
          for (var i = 0, l = axisData1[2].data.length; i < l; i++) {
            table1 +=
              "<tr>" +
              '<td class="a1">' +
              axisData1[2].data[i][0] +
              "</td>" +
              '<td class="a2">' +
              axisData1[2].data[i][1] +
              "</td>" +
              '<td class="a3">' +
              axisData1[2].data[i][2] +
              "</td>" +
              '<td class="a4">' +
              axisData1[2].data[i][3] +
              "</td>" +
              "</tr>";
          }
          table1 += "</tbody></table></div>";
          return header + table1;
        }
      };
      this.myChart.setOption(this.option);

      this.render1(
        this.userInfo,
        this.processing_value,
        this.date[0],
        this.date[1],
        this.day_datas,
        this.ovulateList
      );
    },
    renderItem(params, api) {
      var yValue = api.value(2);
      var start = api.coord([api.value(0), yValue]);
      var size = api.size([api.value(1) - api.value(0), yValue]);
      var style = api.style();
      return {
        type: "rect",
        shape: {
          x: start[0] + 1,
          y: start[1],
          width: size[0] - 2,
          height: size[1]
        },
        style: style
      };
    },
    //获取数据图表渲染
    render1(info, processing_value, begin_date, end_date, day_datas, add_ovuo) {
      this.myChart.showLoading();
      if (day_datas.length !== 0) {
        let ovulationWeek = [];
        let menstrual = [];
        if (info.nickName) {
          const cases = info.menstruationHistory.split(",");
          const ovuPeriods = info.ovuPeriods.split(",");

          /**
           * 获取所有的例假时间，根据开始例假时间和结束把中间的例假时间补充完整
           */
          let all_cases = []; //所有的例假时间
          let cases_start = []; //开始例假期
          for (var i = 0; i < cases.length; i++) {
            const time1 = cases[i].split(":");
            const time2 =
              time1[0].substr(0, 4) +
              "-" +
              time1[0].substr(4, 2) +
              "-" +
              time1[0].substr(6, 2);
            const time3 =
              time1[1].substr(0, 4) +
              "-" +
              time1[1].substr(4, 2) +
              "-" +
              time1[1].substr(6, 2);
            let time4 = [];
            time4.push(time2);
            time4.push(time3);
            all_cases.push(getDays(time4[0], time4[1]).split(","));
            cases_start.push(time4[0]);
          }

          let time_data = [].concat.apply([], all_cases); //所有的例假期时间

          /**
           * 获取所有的后台计算的易排卵时间，并把间隔时间补充完整
           */
          let all_ovuPeriods = []; //所有的易排卵时间
          for (let i = 0; i < ovuPeriods.length; i++) {
            const time1 = ovuPeriods[i].split(":");
            const time2 =
              time1[0].substr(0, 4) +
              "-" +
              time1[0].substr(4, 2) +
              "-" +
              time1[0].substr(6, 2);
            const time3 =
              time1[1].substr(0, 4) +
              "-" +
              time1[1].substr(4, 2) +
              "-" +
              time1[1].substr(6, 2);
            let time4 = [];
            time4.push(time2);
            time4.push(time3);
            all_ovuPeriods.push(getDays(time4[0], time4[1]).split(","));
          }

          //易排卵期去除 例假期中重复的天数
          let tempArray1 = [];
          //去重后的数组
          let tempArray2 = [];

          for (let i = 0; i < all_cases[0].length; i++) {
            tempArray1[all_cases[0][i]] = true;
          }

          for (let j = 0; j < all_ovuPeriods[0].length; j++) {
            if (!tempArray1[all_ovuPeriods[0][j]]) {
              tempArray2.push(all_ovuPeriods[0][j]);
            }
          }

          if (tempArray2.length !== all_ovuPeriods[0].length) {
            all_ovuPeriods[0] = tempArray2;
          }

          let cycleLength = "";
          if (info.physiologicalLength !== 0) {
            cycleLength = "/实际周期天数" + info.physiologicalLength;
          } else {
            cycleLength = "";
          }

          // 用户的基本信息
          this.user =
            "ID" +
            this.$route.query.userId +
            "/" +
            info.nickName +
            "/年龄" +
            info.age +
            cycleLength +
            "/预测周期天数" +
            info.predictPhyLength +
            "/浮动天数" +
            info.cycleFloatingDays +
            "/检测次数" +
            info.count;
          /**
           * 白天，晚上 把需要的数据从后台返回的数据个过滤出来，检测时间、佑蜜值、原始值等
           */
          //白天
          this.day_filter = echarts.util.map(day_datas, function(entry) {
            return [
              formatDate(entry.detectionTime),
              entry.waterContent,
              entry.preWaterContent,
              entry.temperature,
              entry.testRecord,
              formatDateTime(entry.detectionTime)
            ];
          });

          this.day_filter = unique(this.day_filter);
          /**
           *判断是否有处理值，再根据条件做展示处理
           */
          if (processing_value) {
            //处理值
            this.processing_values = echarts.util.map(
              processing_value,
              function(entry) {
                if (
                  entry.detectionTime >=
                    new Date(compatibility_ios(begin_date)).getTime() &&
                  entry.detectionTime <=
                    new Date(compatibility_ios(end_date)).getTime() +
                      1000 * 60 * 60 * 24
                ) {
                  return [
                    formatDate(entry.detectionTime),
                    entry.peakValue,
                    entry.dataVip,
                    entry.noOvuDays,
                    entry.waterContent,
                    entry.stdev,
                    entry.baseline,
                    entry.excludeCond,
                    entry.p1,
                    entry.p2,
                    entry.ovulation,
                    formatDateTime(entry.detectionTime)
                  ];
                }
              }
            );

            this.processing_values = this.processing_values.filter(function(v) {
              if (v !== undefined) {
                return v;
              }
            });

            //2019/4/16  Kevin说把处理值曲线激增修改到佑蜜值曲线中
            const filter_surge = day_datas.filter(function(value, index) {
              if (day_datas[index].ovulation == true) {
                return day_datas[index];
              }
            });

            const surge = echarts.util.map(filter_surge, function(entry) {
              if (entry.detectionTime) {
                return [formatDate(entry.detectionTime), entry.waterContent];
              } else {
                return false;
              }
            });

            if (surge) {
              for (var i = 0; i < surge.length; i++) {
                this.source.push({
                  name: "优孕",
                  value: "优孕",
                  xAxis: surge[i][0],
                  yAxis: surge[i][1]
                });
              }
            }
          }

          /**
           * 获取y轴最大值，首先要获取早上晚上曲线的最大值，处理值跟递进方差值的最大值
           */
          let y_data1 = day_datas.map(function(v, i) {
            return v.waterContent;
          });

          if (y_data1.length > 0) {
            y_data1 = Math.max.apply(null, y_data1);
          } else {
            y_data1;
          }

          let y_datas;
          y_datas = y_data1;
          y_data1 = null;

          let concat_values;
          if (this.processing_values) {
            let peakValue1 = this.processing_values.map(function(v) {
              return v[1];
            });
            let peakValue2 = this.processing_values.map(function(v) {
              return v[5];
            });
            peakValue1 = Math.max.apply(null, peakValue1);
            peakValue2 = Math.max.apply(null, peakValue2);
            if (peakValue1 > peakValue2) {
              concat_values = peakValue1;
            } else {
              concat_values = peakValue2;
            }
            peakValue1 = peakValue2 = null;
          }

          let max_value;
          if (y_datas > concat_values) {
            max_value = y_datas;
          } else {
            max_value = concat_values;
          }
          y_datas = concat_values = null;
          const max_ceil_value = Math.ceil(max_value);
          const splitNumber = Math.ceil(max_ceil_value / 50);
          let max_ceil_values = "";
          if (isInteger(max_ceil_value / 50)) {
            max_ceil_values = Math.ceil(max_value);
          } else {
            max_ceil_values = 50 * splitNumber;
          }

          // 如果max_ceil_values为0就设置默认值400
          if (max_ceil_values === 0) {
            max_ceil_values = 400;
          }

          /**
           * 根据检测的数据取早晚中取最小的时间跟最大的时间
           */
          let day_left_confine;
          let day_right_confine;
          let night_left_confine;
          let night_right_confine;
          let start_confine; //取白天晚上的中的最小时间，左边的边界
          let end_confine; //取白天晚上的中的最大时间，右边的边界
          if (this.day_filter.length > 0) {
            day_left_confine = this.day_filter[0][0];
            day_right_confine = this.day_filter[this.day_filter.length - 1][0];

            day_left_confine = new Date(
              compatibility_ios(day_left_confine.split(" ")[0])
            ).getTime();
            day_right_confine = new Date(
              compatibility_ios(day_right_confine.split(" ")[0])
            ).getTime();
          }

          start_confine = day_left_confine;
          end_confine = day_right_confine;

          /**
           * 根据左边右边的边界时间把例假期跟易排卵期过滤出来
           */
          let fillter_time_data = time_data.filter(function(v) {
            return v;
          });

          //如果易排卵时间超过就近的一次检测的值时，就把易排乱时间的截止显示在最新的检测
          var ovulation_week1 = all_ovuPeriods[0].filter(function(v, index) {
            var filter_time = new Date(compatibility_ios(v));
            return v;
          });

          let compatibility;

          // 例假期
          fillter_time_data.forEach(function(v, i) {
            var arr = v.split(/[- : \/]/);
            compatibility = new Date(arr[0], arr[1] - 1, arr[2]);
            menstrual[i] = [];
            menstrual[i][0] = v;
            menstrual[i][1] = dateAdd(compatibility);
            menstrual[i][2] = max_ceil_values;
          });

          //易排卵
          ovulation_week1.forEach(function(v, i) {
            var arr = v.split(/[- : \/]/);
            compatibility = new Date(arr[0], arr[1] - 1, arr[2]);
            ovulationWeek[i] = [];
            ovulationWeek[i][0] = v;
            ovulationWeek[i][1] = dateAdd(compatibility);
            ovulationWeek[i][2] = max_ceil_values;
          });
          /**
           * add_ovuo是排卵时间
           */

          if (add_ovuo.ovuolaPeriod !== undefined) {
            var ovulation_date = [];
            for (var i = 0; i < add_ovuo.ovuolaPeriod.length; i++) {
              ovulation_date.push(add_ovuo.ovuolaPeriod[i].split(" ~ "));
            }
            var ovulationDate1 = [];
            ovulation_date.forEach(function(v, i) {
              ovulationDate1[i] = [];
              if (
                new Date(compatibility_ios(v[0])).getTime() >=
                  new Date(compatibility_ios(begin_date)).getTime() &&
                new Date(compatibility_ios(v[0])).getTime() <=
                  new Date(compatibility_ios(end_date)).getTime()
              ) {
                ovulationDate1[i] = v;
              }
              ovulationDate1[i][2] = max_ceil_values;
            });
            this.ovulationDate2 = ovulationDate1;
          }

          /**
           * add_ovuo.sexPeriod 爱爱折线
           * add_ovuo.ultrasoundPeriod 阴超
           */
          let normalNumber = 50;
          if (add_ovuo.sexPeriod !== undefined) {
            this.sexPeriodData = add_ovuo.sexPeriod.map(item => {
              return [formatDate(item), normalNumber, "icon", "爱爱"];
            });
          }

          if (add_ovuo.ultrasoundPeriod !== undefined) {
            this.ultrasoundPeriodData = add_ovuo.ultrasoundPeriod.map(item => {
              return [formatDate(item), normalNumber, "icon", "阴超"];
            });
          }

          /**
           * 获取最后一个时间  处理值，递进方差，早上曲线，晚上曲线，易排卵期;图表默认展示10天
           */
          var x_time = [];
          if (this.processing_values.length > 0) {
            var x_processing_values = this.processing_values[
              this.processing_values.length - 1
            ][0];
            x_time.push(
              new Date(compatibility_ios(x_processing_values)).getTime()
            );
          }
          if (this.day_filter.length > 0) {
            var x_day_filter = this.day_filter[this.day_filter.length - 1][0];
            x_time.push(new Date(compatibility_ios(x_day_filter)).getTime());
          }
          if (ovulationWeek.length > 0) {
            var x_ovulationWeek = ovulationWeek[ovulationWeek.length - 1][1];
            x_time.push(new Date(compatibility_ios(x_ovulationWeek)).getTime());
          }
          x_time = Math.max.apply(null, x_time);
          var x_ago_time = x_time - 10 * 1000 * 60 * 60 * 24;

          x_time = formatDate(x_time);
          x_ago_time = formatDate(x_ago_time);
          this.myChart.hideLoading();
          this.myChart.clear();
          this.myChart.setOption(this.option);
          this.myChart.setOption({
            //载入数据
            title: {
              subtext: this.user
            },
            yAxis: [
              {
                type: "value",
                min: 0,
                max: max_ceil_values,
                splitNumber: splitNumber
              }
            ],
            series: [
              //填入系列（内容）数据
              {
                name: "处理值",
                encode: {
                  x: 0,
                  y: 1
                },
                data: this.processing_values,
                smooth: true,
                itemStyle: {
                  normal: {
                    color: "#b34038",
                    lineStyle: {
                      color: "#b34038"
                    }
                  }
                }
              },
              {
                name: "递进方差值",
                encode: {
                  x: 0,
                  y: 5
                },
                data: this.processing_values,
                smooth: true,
                itemStyle: {
                  normal: {
                    color: "#334553",
                    lineStyle: {
                      color: "#334553"
                    }
                  }
                }
              },
              {
                name: "基线",
                encode: {
                  x: 0,
                  y: 6
                },
                data: this.processing_values,
                smooth: true,
                itemStyle: {
                  normal: {
                    color: "#e1ad31",
                    lineStyle: {
                      color: "#e1ad31"
                    }
                  }
                }
              },
              {
                name: "爱爱",
                encode: {
                  x: 0,
                  y: 1
                },
                data: this.sexPeriodData,
                symbol:
                  "image://http://www.liangzhunglobal.com:88/group1/M00/00/22/rBPDl12hfqiAdu0OAAACsunO0ro965.png",
                symbolSize: [20, 24],
                label: {
                  show: false,
                  color: "rgba(235,235,235,0)"
                },
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: "rgba(235,235,235,0)"
                    }
                  }
                }
              },
              {
                name: "阴超",
                encode: {
                  x: 0,
                  y: 1
                },
                data: this.ultrasoundPeriodData,
                label: {
                  show: false,
                  color: "rgba(235,235,235,0)"
                },
                symbol:
                  "image://http://www.liangzhunglobal.com:88/group1/M00/00/22/rBPDl12hf1WAK2pCAAAC_GMCrzc951.png",
                symbolSize: [20, 24],
                itemStyle: {
                  normal: {
                    color: "rgba(214,121,255,1)",
                    lineStyle: {
                      color: "rgba(214,121,255,0)"
                    }
                  }
                }
              },
              {
                name: "佑蜜值",
                encode: {
                  x: 0,
                  y: 1
                },
                data: this.day_filter,
                smooth: true,
                markPoint: {
                  data: this.source,
                  symbolOffset: [0, "-50%"]
                },
                itemStyle: {
                  normal: {
                    color: "rgba(214,121,255,1)",
                    lineStyle: {
                      color: "rgba(214,121,255,1)"
                    }
                  }
                }
              },
              {
                name: "易排卵期",
                encode: {
                  x: [0, 1],
                  y: 2
                },
                data: ovulationWeek
              },
              {
                name: "例假期",
                encode: {
                  x: [0, 1],
                  y: 2
                },
                data: menstrual
              },
              {
                name: "排卵时间",
                encode: {
                  x: [0, 1],
                  y: 2
                },
                data: this.ovulationDate2
              }
            ]
          });
          //半年
          const dataLength = getDays(begin_date, end_date).split(",").length;
          if (dataLength >= 180) {
            this.myChart.setOption({
              series: [
                //填入系列（内容）数据
                {
                  name: "处理值",
                  label: {
                    normal: {
                      show: true,
                      position: "top"
                    }
                  }
                },
                {
                  name: "递进方差值",
                  label: {
                    normal: {
                      show: true,
                      position: "top"
                    }
                  }
                },
                {
                  name: "爱爱",
                  label: {
                    normal: {
                      show: true,
                      position: "top"
                    }
                  }
                },
                {
                  name: "阴超",
                  label: {
                    normal: {
                      show: true,
                      position: "top"
                    }
                  }
                },
                {
                  name: "佑蜜值",
                  label: {
                    normal: {
                      show: true,
                      position: "top"
                    }
                  }
                },
                {
                  name: "基线",
                  label: {
                    normal: {
                      show: true,
                      position: "top"
                    }
                  }
                }
              ]
            });
          } else {
            if (this.day_filter.length >= 20) {
              console.log(x_time);
              console.log(x_ago_time);
              this.myChart.setOption({
                xAxis: {
                  maxInterval: 3600 * 1000 * 24
                },
                dataZoom: [
                  {
                    startValue: x_time,
                    endValue: x_ago_time
                  }
                ]
              });
            }
          }
        }
      }
    }
  },

  watch: {
    userInfo: function() {
      this.initData();
    },
    processing_value: function() {
      this.initData();
    },
    date: function() {
      this.initData();
    },
    day_datas: function() {
      this.initData();
    },
    ovulateList: function() {
      this.initData();
    }
  },
  beforeDestroy() {
    this.myChart.clear();
  }
};
</script>

<style lang="less">
.line1 {
  display: flex;
  justify-content: center;
}
.a1 {
  width: 40%;
  text-align: center;
}
.a2 {
  width: 20%;
  text-align: center;
}
.a3 {
  width: 20%;
  text-align: center;
}
.a4 {
  widows: 20%;
  text-align: center;
}
</style>
